<template>
  <div class="weather-app" :class="weatherClass">
    <div class="weather-container">
      <!-- 左侧当前天气 -->
      <div class="current-weather">
        <!-- 头部信息 -->
        <div class="weather-header">
          <h2 class="location">{{ weatherData.city }}</h2>
          <div class="meta-info">
            <span class="update-time">更新: {{ formatTime(weatherData.updateTime) }}</span>
            <span class="current-date">{{ currentDate }}</span>
          </div>
        </div>

        <!-- 主要天气信息 -->
        <div class="weather-main">
          <div class="primary-info">
            <div class="weather-icon">
              <img :src="getWeatherIcon(weatherData.now.icon)" :alt="weatherData.now.text">
            </div>
            <div class="temp-info">
              <div class="temp-value">
                <span class="temp">{{ weatherData.now.temp }}</span>
                <span class="temp-unit">°C</span>
              </div>
              <div class="weather-desc">{{ weatherData.now.text }}</div>
              <div class="feels-like">体感: {{ weatherData.now.feelsLike }}°C</div>
            </div>
          </div>

          <!-- 天气详情 -->
          <div class="weather-details">
            <div class="detail-grid">
              <div class="detail-item">
                <div class="detail-icon">🌬️</div>
                <div class="detail-content">
                  <div class="detail-label">风向</div>
                  <div class="detail-value">{{ weatherData.now.windDir }}</div>
                </div>
              </div>
              <div class="detail-item">
                <div class="detail-icon">💨</div>
                <div class="detail-content">
                  <div class="detail-label">风速</div>
                  <div class="detail-value">{{ weatherData.now.windSpeed }}km/h</div>
                </div>
              </div>
              <div class="detail-item">
                <div class="detail-icon">💧</div>
                <div class="detail-content">
                  <div class="detail-label">湿度</div>
                  <div class="detail-value">{{ weatherData.now.humidity }}%</div>
                </div>
              </div>
              <div class="detail-item">
                <div class="detail-icon">📊</div>
                <div class="detail-content">
                  <div class="detail-label">气压</div>
                  <div class="detail-value">{{ weatherData.now.pressure }}hPa</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 底部信息 -->
        <div class="weather-footer">
          <a :href="weatherData.fxLink" target="_blank" class="more-info">查看更多天气信息</a>
        </div>
      </div>

      <!-- 右侧15天预报和24小时预报 -->
      <div class="forecast-section">

        <!-- 小时预报 -->
        <div class="hourly-forecast">
          <h3 class="section-title">24小时预报</h3>
          <div class="hourly-list">
            <div v-for="(hour, index) in weatherData.hourly" :key="index" class="hourly-item">
              <div class="hourly-time">{{ formatHour(hour.fxTime) }}</div>
              <div class="hourly-icon">
                <img :src="getWeatherIcon(hour.icon)" :alt="hour.text">
              </div>
              <div class="hourly-temp">{{ hour.temp }}°</div>
              <div class="hourly-text">{{ hour.text }}</div>
            </div>
          </div>
        </div>

        <!-- 15天天气预报 -->
        <div class="daily-forecast">
          <h3 class="section-title">15天预报</h3>
          <div class="forecast-scroll-container">
            <div class="forecast-list">
              <div v-for="(day, index) in weatherData.daily" :key="index" class="forecast-item">
                <div class="forecast-day">{{ day.fxDate }}</div>
                <div class="forecast-week">{{ formatDay(day.fxDate) }}</div>
                <div class="forecast-icon">
                  <img :src="getWeatherIcon(day.iconDay)" :alt="day.textDay">
                </div>
                <div class="forecast-temp">
                  <span class="temp-max">{{ day.tempMax }}°</span>
                  <span class="temp-min">{{ day.tempMin }}°</span>
                </div>
                <div class="forecast-text">{{ day.textDay }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'WeatherDisplay',
  props: {
    weatherData: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    // 根据天气类型返回对应的CSS类
    const weatherClass = computed(() => {
      const weatherText = props.weatherData.now.text
      if (weatherText.includes('晴')) return 'weather-sunny'
      if (weatherText.includes('雨')) return 'weather-rainy'
      if (weatherText.includes('云')) return 'weather-cloudy'
      if (weatherText.includes('阴')) return 'weather-overcast'
      if (weatherText.includes('雪')) return 'weather-snowy'
      return 'weather-default'
    })

    // 获取当前日期
    const currentDate = computed(() => {
      const now = new Date()
      return now.toLocaleDateString('zh-CN', {
        weekday: 'short',
        year: 'numeric',
        month: 'short',
        day: 'numeric'
      })
    })

    // 格式化时间
    const formatTime = (timeString) => {
      const date = new Date(timeString)
      return date.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      })
    }

    // 格式化日期为星期几
    const formatDay = (dateString) => {
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', { weekday: 'short' })
    }

    // 格式化小时为HH:mm
    const formatHour = (timeString) => {
      const date = new Date(timeString)
      return date.toLocaleTimeString('zh-CN', {
        hour: '2-digit',
        hour12: false
      }).replace(':00', '')
    }

    const WEATHER_ICON_MAP = {
      // 基础天气
      '100': 'sun',           // 晴
      '101': 'cloud',         // 多云
      '103': 'cloud-sun',     // 晴间多云
      '104': 'cloud-2',         // 阴
      '150': 'moon',          // 晴夜
      '153': 'cloud-moon',    // 晴间多云夜

      // 降水天气
      '300': 'cloud-rain',    // 阵雨
      '301': 'cloud-showers-heavy', // 强阵雨
      '302': 'bolt',          // 雷阵雨
      '303': 'bolt',          // 强雷阵雨
      '304': 'poo-storm',     // 雷阵雨伴有冰雹
      '305': 'cloud-rain',    // 小雨
      '306': 'cloud-rain',    // 中雨
      '307': 'cloud-showers-heavy', // 大雨
      '308': 'cloud-showers-heavy', // 极端降雨
      '309': 'cloud-rain',    // 毛毛雨
      '310': 'cloud-showers-heavy', // 暴雨
      '311': 'cloud-showers-heavy', // 大暴雨
      '312': 'cloud-showers-heavy', // 特大暴雨
      '313': 'icicles',       // 冻雨

      // 雪天
      '400': 'snowflake',     // 小雪
      '401': 'snowflake',     // 中雪
      '402': 'snowflake',     // 大雪
      '403': 'snowflake',     // 暴雪
      '404': 'snowflake',     // 雨夹雪
      '405': 'snowflake',     // 雨雪天气
      '406': 'snowflake',     // 阵雨夹雪
      '407': 'snowflake',     // 阵雪

      // 空气质量
      '500': 'smog',          // 薄雾
      '501': 'smog',          // 雾
      '502': 'smog',          // 霾
      '503': 'wind',          // 扬沙
      '504': 'wind',          // 浮尘
      '507': 'wind',          // 沙尘暴
      '508': 'wind',          // 强沙尘暴

      // 温度异常
      '900': 'temperature-high', // 高温
      '901': 'temperature-low',  // 低温
      '999': 'question-circle'   // 未知状态
    };

    // 获取天气图标
    const getWeatherIcon = (iconCode) => {
      return require(`@/assets/weather/${WEATHER_ICON_MAP[iconCode] || 'cloud-2'}.png`)
    }

    return {
      weatherClass,
      currentDate,
      formatTime,
      formatDay,
      formatHour,
      getWeatherIcon
    }
  }
}
</script>

<style scoped>
/* 基础样式 */
.weather-app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  min-height: auto;
}

.weather-container {
  width: 100%;
  max-width: 900px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  gap: 20px;
}

/* 天气类型背景 */
.weather-sunny {
  background: linear-gradient(135deg, #448ae7 0%, #a0adc5 100%);
}

.weather-rainy {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}

.weather-cloudy {
  background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
}

.weather-overcast {
  background: linear-gradient(135deg, #bdc3c7 0%, #2c3e50 100%);
}

.weather-snowy {
  background: linear-gradient(135deg, #e6e9f0 0%, #eef1f5 100%);
}

.weather-default {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 左侧当前天气 */
.current-weather {
  flex: 1;
  min-width: 300px;
}

/* 右侧预报区域 */
.forecast-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 300px;
}

/* 头部样式 */
.weather-header {
  margin-bottom: 15px;
}

.location {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 5px 0;
  color: #333;
}

.meta-info {
  display: flex;
  gap: 15px;
  font-size: 0.85rem;
  color: #555;
}

/* 主要天气信息 */
.weather-main {
  display: flex;
  flex-direction: column;
}

.primary-info {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.weather-icon {
  width: 80px;
  height: 80px;
}

.weather-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.temp-info {
  flex: 1;
}

.temp-value {
  display: flex;
  align-items: flex-start;
  line-height: 1;
}

.temp {
  font-size: 2.8rem;
  font-weight: 300;
  color: #333;
}

.temp-unit {
  font-size: 1.2rem;
  margin-top: 5px;
  color: #666;
}

.weather-desc {
  font-size: 1.1rem;
  font-weight: 500;
  color: #444;
  margin: 5px 0;
}

.feels-like {
  font-size: 0.85rem;
  color: #666;
}

/* 天气详情 */
.weather-details {
  margin-top: 10px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.detail-item {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.detail-icon {
  font-size: 1.5rem;
  margin-right: 10px;
}

.detail-content {
  flex: 1;
}

.detail-label {
  font-size: 0.75rem;
  color: #666;
  margin-bottom: 2px;
}

.detail-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
}

/* 预报区域公共样式 */
.section-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #333;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* 15天预报 */
.daily-forecast {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.forecast-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.forecast-item {
  display: flex;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}

.forecast-item:last-child {
  border-bottom: none;
}

.forecast-day {
  width: 100px;
  font-weight: 500;
  color: #333;
}

.forecast-week {
  width: 40px;
  font-weight: 500;
  color: #333;
}


.forecast-icon {
  width: 30px;
  height: 30px;
  margin: 0 10px;
}

.forecast-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.forecast-temp {
  width: 60px;
  display: flex;
  justify-content: space-between;
}

.forecast-scroll-container {
  height: 150px;
  /* 固定高度，显示约3天内容 */
  overflow-y: auto;
  padding-right: 5px;
}

.forecast-scroll-container::-webkit-scrollbar {
  width: 4px;
}

.forecast-scroll-container::-webkit-scrollbar-thumb {
  background: rgba(88, 86, 86, 0.3);
  border-radius: 2px;
}


.temp-max {
  color: #e74c3c;
  font-weight: 500;
}

.temp-min {
  color: #3498db;
}

.forecast-text {
  flex: 1;
  text-align: right;
  font-size: 0.85rem;
  color: #555;
}

/* 小时预报 */
.hourly-forecast {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.hourly-list {
  display: flex;
  overflow-x: auto;
  gap: 15px;
  padding: 5px 0;
}

.hourly-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}

.hourly-time {
  font-size: 0.8rem;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.hourly-icon {
  width: 30px;
  height: 30px;
  margin: 5px 0;
}

.hourly-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hourly-temp {
  font-size: 0.9rem;
  font-weight: 500;
  color: #333;
  margin: 5px 0;
}

.hourly-text {
  font-size: 0.7rem;
  color: #555;
  text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .weather-container {
    flex-direction: column;
    max-width: 100%;
  }

  .current-weather,
  .forecast-section {
    min-width: 100%;
  }

  .hourly-list {
    padding-bottom: 10px;
  }
}

/* 底部信息 */
.weather-footer {
  margin-top: 50px;
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>